import React from 'react'
//导入头部导航组件
import Navheader from '@/components/Navheader';
import { Form, Input, Button, Card } from 'antd-mobile';
import { RightOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import { useSelector, useDispatch } from 'react-redux'
import { update } from '@/store/index'
// 导入登录接口
import { userlogin } from '@/api/login'

type Props = {};

export default function Login({ }: Props) {
    const navigate = useNavigate()
    //  const userid = useSelector((state: { userid: string }) => state.userid)
    // console.log('state', state);
    const dispatch = useDispatch()
    // 点击登录
    const onFinish = (values: any) => {
        // console.log(values)
        // 调用登录接口
        userlogin(values).then(res => {
            console.log('res', res);
            if (res.data.code == 200) {
                // 登录成功
                localStorage.setItem('token', res.data.data.token)
                // 将用户返回的userid 存到rtk中
                dispatch(update(res.data.data.userid))
                // 跳转到首页
                navigate('/home')
            }
        })
    }

    const onHeaderClick = () => {
        // 跳转到 step1
        navigate('/regist/step1')
    }
    return (
        <div className='login'>
            <Navheader title={'京东登录'} isshow={false}></Navheader>
            {/* 登录的表单 */}
            <Form layout='horizontal'
                footer={
                    <Button block type='submit' color='primary' size='large'>
                        提交
                    </Button>
                }
                onFinish={onFinish}
            >
                <Form.Item
                    label='用户名'
                    name='loginname'
                    rules={[{ required: true, message: '姓名不能为空!' }]}
                >
                    <Input placeholder='请输入用户名' clearable />
                </Form.Item>
                <Form.Item
                    label='密码'
                    name='password'
                    rules={[{ required: true, message: '密码不能为空!' }]}
                >
                    <Input placeholder='请输入密码' clearable type='password' />
                </Form.Item>
            </Form>

            {/* 注册功能 */}
            <Card
                title={
                    <div style={{ fontWeight: 'normal' }}>
                        快速注册
                    </div>
                }
                extra={<RightOutline />}
                onHeaderClick={onHeaderClick}
                style={{ borderRadius: '16px' }}
            />
        </div>
    )
}